<template>
  <div class="map-container" id="map"></div>
  <map-tools :map="map" />
  <!-- <overview-map /> -->
</template>

<script setup lang="ts">
import { ref, onMounted, unref } from "vue";
import { Map, View } from "ol"; // 地图实例方法、视图方法
import { OverviewMap, defaults as defaultControls } from "ol/control";
import { useMap } from "@/hooks/map/useMap";
import { tianditu } from "@/config/config.js";
import "ol/ol.css"; // 地图样式
import OSM from "ol/source/OSM.js";
import Tile from "ol/layer/Tile"; // 瓦片渲染方法
import XYZ from "ol/source/XYZ";
import MapTools from "@/components/map-tools/index.vue";
// import OverviewMap from "@/components/overview-map/index.vue";

const { tiandituVecLayer, tiandituImgLayer, tiandituCesuimLayer, vector } = useMap();

// 地图
let map: any = ref(null);
//图层
const LayersGroup: any = ref([tiandituVecLayer.vec_w, tiandituVecLayer.cva_w, tiandituImgLayer.img_w, tiandituImgLayer.cia_w, tiandituCesuimLayer.cesuim_layer, tiandituCesuimLayer.cesuim_name, vector]);
const layers: any = ref([tiandituVecLayer.vec_w, tiandituVecLayer.cva_w]);
const initMap = () => {
  map.value = new Map({
    target: "map", // 对应页面里 id 为 map 的元素
    layers: LayersGroup.value,
    view: new View({
      // 地图视图
      projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      center: [102.712251, 25.040609], // 昆明坐标
      minZoom: 10, // 地图缩放最小级别
      zoom: 12, // 地图缩放级别（打开页面时默认级别）
      maxZoom: 18, // 地图缩放最大级别
    }),
    controls: defaultControls({
      zoom: false,
      rotate: false,
      attribution: false,
    }),
  });
  // 大地图添加鹰眼插件
  map.value.addControl(
    new OverviewMap({
      //鹰眼控件的样式名称
      className: "ol-overviewmap ol-custom-overviewmap",
      layers: [
        //加载瓦片数据源
        new Tile({
          source: new XYZ({
            url: tianditu.vec_w,
            crossOrigin: "anonymous",
          }),
        }),
        new Tile({
          source: new XYZ({
            url: tianditu.cva_w,
            crossOrigin: "anonymous",
          }),
        }),
      ],
      //鹰眼控件一开始为展开方式
      collapsed: false,
    })
  );
};

onMounted(() => {
  initMap();
});
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}
::v-deep .ol-overviewmap {
  left: 0.5em;
  bottom: 5em;
}
</style>
<style></style>
